<template>
  <div class="main-layout">
    <div class="close">
      <div></div>
      <div @click="$emit('close')"><img src="@/assets/close.png" alt="" /></div>
    </div>

    <div class="content-container">
      <!-- 顶部并排的两个组件 -->
      <div class="top-row">
        <RoomComfort
          :title="title"
          class="room-comfort"
          :icon-path="currentIcon"
          :currentMatchedCategory="currentMatchedCategory"
        />
        <PositiveReviews
          :positive-reviews="positiveReviews"
          :currentMatchedSubCategories="currentMatchedSubCategories"
          class="positive-reviews"
        />
      </div>

      <!-- 两列布局的 MetricsItem -->
      <!-- <div class="metrics-columns">
        <div class="metrics-column left-column">
          <MetricsItem
            v-for="(category, index) in leftCategories"
            :key="'left-' + index"
            :title="category.title"
            :metricsData="category.data"
          />
        </div>
        <div class="metrics-column right-column">
          <MetricsItem
            v-for="(category, index) in rightCategories"
            :key="'right-' + index"
            :title="category.title"
            :metricsData="category.data"
          />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import MetricsItem from "./components/MetricsItem.vue";
import RoomComfort from "./components/RoomComfort.vue";
import PositiveReviews from "./components/PositiveReviews.vue";

import cleanIcon from "@/assets/pieIcon/clean.png";
import roomIcon from "@/assets/pieIcon/room.png";
import bigbed from "@/assets/pieIcon/circle8/bigbed1.png";
import bigclean from "@/assets/pieIcon/circle8/bigclean1.png";
import biglocation from "@/assets/pieIcon/circle8/biglocation1.png";
import bigsun from "@/assets/pieIcon/circle8/bigsun1.png";
import bigservices from "@/assets/pieIcon/circle8/bigservices1.png";
import bigfood from "@/assets/pieIcon/circle8/bigfood1.png";
import bigmoney from "@/assets/pieIcon/circle8/bigmoney1.png";
import defaultIcon from "@/assets/pieIcon/bigbed.png";
export default {
  components: { MetricsItem, RoomComfort, PositiveReviews },
  data() {
    return {
      bigclean,
      cleanIcon,
      roomIcon,
      biglocation,
      bigsun,
      bigbed,
      bigfood,
      bigservices,
      bigmoney,
      localCategories: [], // 存储 prop 数据的内部状态
      currentMatchedCategory: null, // 新增：存储匹配到的category
      currentMatchedSubCategories: [], // 新增：存储匹配到的subCategories
    };
  },
  props: {
    positiveReviews: {
      type: Array,
      required: true,
    },
    categories: { type: Array, required: true },
    categoriesAPI: {
      type: Object, // 要求传入的是 Object
      required: true, // 或者 false，取决于是否必须
      default: () => ({}), // 可以设置默认值（空对象）
    },
    title: { type: String, required: true }, // 新增 title prop
    currentIcon: String,
  },
  watch: {
    categories: {
      immediate: true,
      handler(newVal) {
        this.localCategories = newVal || []; // 确保为数组
      },
    },
    // 新增：监听title变化，更新匹配结果
    title: {
      immediate: true,
      handler(newVal) {
        this.updateMatchedData();
      },
    },
    // 新增：监听categoriesAPI变化，更新匹配结果
    categoriesAPI: {
      deep: true,
      handler(newVal) {
        this.updateMatchedData();
      },
    },
  },
  methods: {
    // 新增：更新匹配数据的方法
    updateMatchedData() {
      if (!this.title || !this.categoriesAPI?.serviceCategories?.length) {
        this.currentMatchedCategory = null;
        this.currentMatchedSubCategories = [];
        return;
      }

      const cleanTitle = this.title
        .replace(/\s*gories\s*$/i, "")
        .trim()
        .toLowerCase();

      const matched = this.categoriesAPI.serviceCategories.find((item) => {
        const itemTitle = item.title?.toLowerCase() || "";
        const itemKey = item.key?.toLowerCase() || "";
        return (
          itemTitle.includes(cleanTitle) ||
          itemKey.includes(cleanTitle) ||
          cleanTitle.includes(itemTitle) ||
          itemKey === cleanTitle.replace(/\s+/g, "_")
        );
      });

      this.currentMatchedCategory = matched || null;
      this.currentMatchedSubCategories = matched?.subCategories || [];

      console.log("更新匹配数据:", {
        category: this.currentMatchedCategory,
        subCategories: this.currentMatchedSubCategories,
      });
    },
  },
  mounted() {
    this.updateMatchedData(); // 初始化时调用一次
    console.log(
      "子组件接收到的 categoriesAPI:",
      this.categoriesAPI.serviceCategories,
      this.title
    );
    console.log("匹配到的 category:", this.matchedCategory);
    console.log("匹配到的 subCategories:", this.matchedSubCategories);
  },
  computed: {
    leftCategories() {
      const half = Math.ceil(this.localCategories.length / 2); // 使用 localCategories
      return this.localCategories.slice(0, half);
    },
    rightCategories() {
      const half = Math.ceil(this.localCategories.length / 2); // 使用 localCategories
      return this.localCategories.slice(half);
    },
    // 保留计算属性版本（可选）
    matchedCategory() {
      return this.currentMatchedCategory;
    },
    matchedSubCategories() {
      return this.currentMatchedSubCategories;
    },
  },
};
</script>

<style scoped lang="scss">
.main-layout {
  width: 733px;
  background: #fff;
  padding: 15px 32px 24px;
  display: flex;
  flex-direction: column;

  .close {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .content-container {
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto;
    margin-bottom: 3px;
    padding-bottom: 30px;
    /* 新增：为滚动条添加右边距 */
    padding-right: 12px; // 可以根据需要调整这个值
    margin-right: -12px; // 负边距抵消padding对宽度的影响

    .top-row {
      display: flex;
      gap: 16px;
      width: 100%; /* 确保占满父容器 */
      margin-bottom: 24px;
      > * {
        flex: 1; // 平分剩余空间
        min-width: 0; // 允许内容压缩（避免 flex 项被撑开）
        box-sizing: border-box; /* 确保 padding 计入宽度 */
      }
      // 新增：强制设置最小宽度，避免内容挤压
      .room-comfort,
      .positive-reviews {
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }

    .metrics-columns {
      display: flex;
      gap: 16px;
      .metrics-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-width: 0;
      }
    }
  }
}
</style>
